 <!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <meta charset="UTF-8">
    <title>
      Word List
    </title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.css" type="text/css">
    <style type="text/css">
				.light {
				background-color:rgb(30,30,30);
				color:whitesmoke;
				}
				
				.colors div{
				margin:20px;
				font-weight:bold;
				font-size:20px;
				}
                .row-fluid {
                text-align:center;
                }
                .colors {
                text-align:left;
                }
                .form-inline {
                padding-bottom:20px;
                margin-top:20px;
                margin-bottom:0px;
                border-bottom:1px solid #e5e5e5;
                }
                .toggle-container {
                text-align:right;
                }
                #togglestyle, #togglectrl{
                border-top-left-radius:0px;
                border-top-right-radius:0px;
                border-top:0px none;
                background-image:none;
                }
                legend {
                margin-bottom:0px;
                }
				.legend-light{
				color:white;
				}
                input[type="checkbox"]{
                margin-top:2px;
                }
                .togglectrl:active {
                box-shadow:none;
                background-color:rgb(220,220,220);
                }
    </style>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span10 offset1">
          <legend>Color List <small>by Alex Zhang</small></legend>
          <form class="form-inline">
            <fieldset>
              <label><strong>Number of Colors:</strong></label> <input type="number" class="x" placeholder="Enter a value" value="20"> <label class="checkbox"><input type="checkbox" class="checkbox"> Congruent Color Words</label> <button type="submit" class="btn btn-primary sub">Submit</button>
            </fieldset>
          </form>
          <div class="toggle-container">
			<div class="btn-group">
			<a href="" class="btn" id="togglestyle"><i class="icon-off"></i></a>
            <a href="" class="btn" id="togglectrl"><i class="icon-chevron-up"> </i></a>
			</div>
          </div>
          <div class="row-fluid">
            <div class="span2 offset5">
              <div class="colors"></div>
            </div>
          </div>
        </div>
      </div>
    </div><script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
</script><script type="text/javascript" src="http://davidbau.com/encode/seedrandom.js">
</script><script src="js/bootstrap.min.js" type="text/javascript">
</script><script type="text/javascript">
	var lightStyle = true;
	$("#togglestyle").on("click",function(e) {
	e.preventDefault();
	if(lightStyle) {
	$("body").addClass("light");
	$("legend").addClass("legend-light");
	$(".btn-group .btn").addClass("btn-inverse");
	$("i").addClass("icon-white");
	$('.sub').addClass('btn-danger');
	} else {
	$("body").removeClass("light");
	$("legend").removeClass("legend-light");
	$(".btn-group .btn").removeClass("btn-inverse");
	$("i").removeClass("icon-white");
	$('.sub').removeClass('btn-danger');
	}
	lightStyle = !lightStyle;
	});
	var visible = true;
    Math.seedrandom();
    var colors = ["Red","Green","Blue","Orange","Purple","Yellow"];
    $("#togglectrl").on("click",function(data){data.preventDefault();
    if(visible) {
    $('.form-inline').slideUp("fast");
    $('#togglectrl i').toggleClass('icon-chevron-up icon-chevron-down');
	
    } else {
    $('.form-inline').slideDown("fast");
    $('#togglectrl i').toggleClass('icon-chevron-down icon-chevron-up');

    }
    visible = !visible;
    });
    $(".sub").on("click", function(data){
    data.preventDefault();
    $(".colors").fadeOut("fast",function() {$(".colors").html("");
    var congruent = $(".checkbox").is(":checked");
	if(congruent) {
		$('.colors').html('<div style="color:Purple">Purple</div><div style="color:Yellow">Yellow</div><div style="color:Yellow">Yellow</div><div style="color:Blue">Blue</div><div style="color:Purple">Purple</div><div style="color:Yellow">Yellow</div><div style="color:Green">Green</div><div style="color:Blue">Blue</div><div style="color:Purple">Purple</div><div style="color:Blue">Blue</div><div style="color:Orange">Orange</div><div style="color:Green">Green</div><div style="color:Red">Red</div><div style="color:Green">Green</div><div style="color:Blue">Blue</div><div style="color:Green">Green</div><div style="color:Red">Red</div><div style="color:Yellow">Yellow</div><div style="color:Green">Green</div><div style="color:Red">Red</div>');
	}
	else {
		$('.colors').html('<div style="color:Red">Orange</div><div style="color:Blue">Purple</div><div style="color:Yellow">Orange</div><div style="color:Red">Yellow</div><div style="color:Green">Red</div><div style="color:Purple">Red</div><div style="color:Red">Green</div><div style="color:Blue">Orange</div><div style="color:Green">Blue</div><div style="color:Blue">Red</div><div style="color:Green">Yellow</div><div style="color:Orange">Blue</div><div style="color:Blue">Yellow</div><div style="color:Red">Green</div><div style="color:Blue">Purple</div><div style="color:Yellow">Orange</div><div style="color:Green">Yellow</div><div style="color:Red">Green</div><div style="color:Orange">Purple</div><div style="color:Blue">Orange</div>');

	}
    $(".colors").hide();
    $(".colors").fadeIn("fast");/*
    var val = $('.x').val();
    for(var i = 0; i < val; i++) {
    var index = Math.floor((Math.random()*colors.length));
    var index2 = Math.floor((Math.random()*colors.length));
    while(index2 === index) { //we want different colors~
                index2 = Math.floor((Math.random()*colors.length));
    }
    $(".colors").append("<div style='color:"+colors[congruent?index:index2]+"'>" + colors[index] + "<\/div>");
    $(".colors").hide();
    $(".colors").fadeIn("fast");
        }*/
    });
    });
    $("div").each(function(i, e) {
        $(this).css({"color":$(e.nextElementSibling).attr("class")});   
        });
    </script>
  </body>
</html>
